
import React,{Fragment} from "react";
import {Alert, Form, message, Modal} from "antd";
import service from "../../libs/request";
import store from "../../pages/generate/ordinary/Store";
import ActionForm from "./ActionForm";
import ActionDetail from "./ActionDetail";
import ActionImport from "./ActionImport";
import FormatRaw from "../formater/FormatRaw";

class ActionModal extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            contentType:null,
            config:null,
            formSubmitUri:null,
            data:{}
        };
        this.configUri = props.configUri;
        this.configParams = props.configParams;
    }

    componentDidMount() {
        if (!this.configUri){
            message.error("配置地址不能为空");
        }else {
            service.request({
                url:this.configUri,
                method:"get",
                params:this.configParams,
            }).then(response => {
                if (response.data.code === 200){
                    this.setState({
                        contentType: response.data.type,
                        config: response.data.config,
                        formSubmitUri: response.data.formSubmitUri,
                        data:response.data.data,
                    });
                }

            })
        }
    }

    handleFormSubmit = () => {
        if (!this.state.formSubmitUri){
            message.error("表单提交地址缺失")
        }else {
            this.props.form.validateFields((err, formData) => {
                if (!err){
                    this.setState({loading: true});
                    formData['id'] = store.record.id;
                    service.request({
                        url:this.state.formSubmitUri,
                        method:"post",
                        data:formData,
                    }).then(response => {
                        if (response.data.code === 200){
                            store.fetchRecords();
                            //关闭弹窗
                            store.modalVisible = false;
                        }
                    }).finally(() => {this.setState({loading: false})});

                }
            });
        }
    };

    render() {
        return (
            <Fragment>
                {
                    store.modalConfig["footer"] === false ?
                        <Modal
                            footer={null}
                            visible
                            width={store.modalConfig["width"] ? store.modalConfig["width"] : 800}
                            maskClosable={store.modalConfig["maskClosable"] ? store.modalConfig["maskClosable"] : true}
                            title={store.modalConfig["title"] ? store.modalConfig["title"] : "弹窗标题"}
                            okText={store.modalConfig["okText"] ? store.modalConfig["okText"] : "确定"}
                            cancelText={store.modalConfig["cancelText"] ? store.modalConfig["cancelText"] : "取消"}
                            onCancel={() => store.modalVisible = false}
                            confirmLoading={this.loading}
                            onOk={this.handleFormSubmit}>
                            {
                                store.modalConfig["alert"] &&  <Alert closable showIcon type={store.modalConfig["alert"] && store.modalConfig["alert"]["type"] ? store.modalConfig["alert"]["type"] : "info"} message={store.modalConfig["alert"] && store.modalConfig["alert"]["message"] ? store.modalConfig["alert"]["message"] : "小提示"}
                                                                                 style={{width:store.modalConfig["alert"] && store.modalConfig["alert"]["width"] ? store.modalConfig["alert"]["width"] : 600, margin: '0 auto 20px', color: '#31708f !important'}}
                                                                                 description={store.modalConfig["alert"] && store.modalConfig["alert"]["description"] ? store.modalConfig["alert"]["description"] : "提示信息"}/>
                            }

                            {this.state.contentType === "FORM" && <ActionForm form={this.props.form} config={this.state.config} />}
                            {this.state.contentType === "DETAIL" && <ActionDetail config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "IMPORT" && <ActionImport url={this.configUri} params={this.configParams} config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "RAW" && <FormatRaw record={this.state.data}/>}
                        </Modal> :
                        <Modal
                            visible
                            width={store.modalConfig["width"] ? store.modalConfig["width"] : 800}
                            maskClosable={store.modalConfig["maskClosable"] ? store.modalConfig["maskClosable"] : true}
                            title={store.modalConfig["title"] ? store.modalConfig["title"] : "弹窗标题"}
                            okText={store.modalConfig["okText"] ? store.modalConfig["okText"] : "确定"}
                            cancelText={store.modalConfig["cancelText"] ? store.modalConfig["cancelText"] : "取消"}
                            onCancel={() => store.modalVisible = false}
                            confirmLoading={this.loading}
                            onOk={this.handleFormSubmit}>
                            {
                                store.modalConfig["alert"] &&  <Alert closable showIcon type={store.modalConfig["alert"] && store.modalConfig["alert"]["type"] ? store.modalConfig["alert"]["type"] : "info"} message={store.modalConfig["alert"] && store.modalConfig["alert"]["message"] ? store.modalConfig["alert"]["message"] : "小提示"}
                                                                                 style={{width:store.modalConfig["alert"] && store.modalConfig["alert"]["width"] ? store.modalConfig["alert"]["width"] : 600, margin: '0 auto 20px', color: '#31708f !important'}}
                                                                                 description={store.modalConfig["alert"] && store.modalConfig["alert"]["description"] ? store.modalConfig["alert"]["description"] : "提示信息"}/>
                            }
                            {this.state.contentType === "FORM" && <ActionForm form={this.props.form} config={this.state.config} />}
                            {this.state.contentType === "DETAIL" && <ActionDetail config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "IMPORT" && <ActionImport url={this.configUri} params={this.configParams} config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "RAW" && <FormatRaw record={this.state.data}/>}
                        </Modal>
                }

            </Fragment>
        );
    }
}

export default Form.create()(ActionModal)

